<template>
    <a href="#" v-show="isShow">↑</a>
</template>

<script>
export default {
    data() {
        return {
            isShow:false
        }
    },
    methods:{
        
    },
    mounted(){
        window.addEventListener("scroll",()=>{
            if(window.pageYOffset > 500){
                this.isShow = true
            }else{
                this.isShow = false
            }
        })
    }
}
</script>

<style scoped>
    a{
        text-decoration: none;
        position: fixed;
        right: 20px;
        bottom: 20px;
        border-radius: 50%;
        background-color: #eee;
        border: 1px solid slateblue;
        opacity: 0.5;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        color: #333;
    }
</style>